<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="resetSearch">
      <el-col :span="8" :xs="24" v-if="$permiss[313]">
        <el-form-item :label="$t('所属租户')" prop="tenantId">
          <el-select style="width: 100%" v-model="page.tenantId" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('客群名称')" prop="guestGroupName">
          <el-input v-model="page.guestGroupName"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('状态')" prop="status">
          <el-select style="width: 100%" v-model="page.status" clearable>
            <el-option :label="$t('启用')" :value="0"></el-option>
            <el-option :label="$t('禁用')" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px">
      <div style="text-align: right">
        <el-button type="primary" @click="addList" v-show="$permiss[317]">{{ $t('新增') }}</el-button>
      </div>
      <Table :page="page" :loading="loading" :table-column="tableColumn" :table-data="tableData" style="margin-top: 10px"
             @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange">
        <template slot="status" slot-scope="{row}">
          <el-switch @change="updateStatus(row)" :disabled="!$permiss[315]"
                     :value="row.status === 0"/>
        </template>
        <template slot="handle" slot-scope="{row}">
          <el-button type="text" @click="editList(row)" v-show="$permiss[315]">{{ $t('编辑') }}</el-button>
          <el-button type="text" @click="bindManager(row)" v-show="$permiss[539]">{{ $t('绑定经理') }}</el-button>
          <!--             判断是否绑定经理-->
          <el-button type="text" @click="bindPeople(row)" v-show="$permiss[318]"
                     :disabled="row.isBandManger === 0">{{ $t('绑定人员') }}
          </el-button>
        </template>
      </Table>
    </el-card>
    <Dialog :visible.sync="visible.isShow" :title="visible.title"
            @cancel="visible.isShow = false"
            @close="visibleClear"
            @confirm="visibleConfirm">
      <el-form label-width="80px" :model="form" ref="form" :rules="rulesForm">
        <el-form-item :label="$t('客群名称')" prop="guestGroupName">
          <el-input v-model="form.guestGroupName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('客群天数')" prop="cpdStart">
          <div style="display: flex;width: 100%">
            <el-input :placeholder="$t('开始时间')" v-model.number="form.cpdStart">
              <el-button slot="append">{{ $t('天') }}</el-button>
            </el-input>
            <div style="padding: 0 10px;line-height: 32px">-</div>
            <el-input :placeholder="$t('结束时间')" v-model.number="form.cpdEnd">
              <el-button slot="append">{{ $t('天') }}</el-button>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item :label="$t('状态')" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">{{ $t('启用') }}</el-radio>
            <el-radio :label="1">{{ $t('禁用') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('备注')" prop="remarks">
          <el-input type="textarea" :rows="4" v-model="form.remarks"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
    <BindPeople :bind-visible.sync="bindVisible" :rowsData="rowsData"
                @confirmStaff="getTableData"></BindPeople>
    <BindManager :visible.sync="bindManagerVisible" :rows-data="rowsData"
                 @confirmStaff="getTableData"></BindManager>
  </div>
</template>

<script>
import {deepClone} from "@/utils/tools";
import BindPeople from "./componets/bindPeople";
import BindManager from './componets/bindManager'
import {selectTenant} from "@/api/system";
import {guestGroupList, guestGroupDelete, guestGroupUpdate, addGuestGroup} from '@/api/postLoan'

export default {
  name: 'customerManage',
  data() {
    const {$permiss} = this
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        type: 1
      },
      tableColumn: [
        {label: this.$t('所属租户'), prop: 'tenantName', align: 'center', isHide: !$permiss[313], width: 150},
        {label: this.$t('客群名称'), prop: 'guestGroupName', align: 'center'},
        {label: this.$t('起止时间'), prop: 'beoverdueTime', align: 'center'},
        {label: this.$t('当前订单数'), prop: 'orderNum', align: 'center'},
        {label: this.$t('创建人'), prop: 'adminUserName', align: 'center'},
        {label: this.$t('创建时间'), prop: 'createTime', align: 'center', width: 150},
        {label: this.$t('备注'), prop: 'remarks', align: 'center'},
        {label: this.$t('状态'), align: 'center', slot: 'status'},
        {
          label: this.$t('操作'),
          align: "center",
          slot: 'handle',
          minWidth: 200,
          isHide: !$permiss[315] && !$permiss[539] && !$permiss[318]
        }
      ],
      loading:false,
      tableData: [],
      visible: {
        isShow: false,
        title: '',
        type: ''
      },
      form: {
        type: 1,
        status: 0
      },
      tenantList: [],
      rulesForm: {
        guestGroupName: [
          {required: true, message: this.$t('不能为空')},
        ],
        cpdStart: [
          {
            required: true, validator: (rules, value, callback) => {
              const {cpdStart, cpdEnd} = this.form
              if (cpdStart === "" || cpdEnd === "") {
                return callback(new Error(this.$t('不能为空')))
              } else if (cpdEnd < cpdStart) {
                return callback(new Error(this.$t('开始天数不能大于结束天数')))
              } else if (cpdEnd <= 0 || cpdStart <= 0) {
                return callback(new Error(this.$t('必须大于零')))
              }
              return callback()
            }
          },
        ],
      },
      bindVisible: false,
      bindButton: {},
      rowsData: {},
      bindManagerVisible: false,
    }
  },
  mounted() {
    this.getTableData()
    selectTenant().then(res => {
      this.tenantList = res.data
    })
  },
  methods: {
    async getTableData() {
      this.loading = true
      const res = await guestGroupList(this.page)
      if (res.code === 1) {
        const {list,total} = res.data
        this.tableData = list.map(item => {
          item.beoverdueTime = item.cpdStart + " ~ " + item.cpdEnd
          return item
        })
        this.page = Object.assign({}, this.page, {
          total: total
        })
        this.loading = false
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    resetSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        type: 1
      }
      this.getTableData()
    },
    addList() {
      this.visible = {
        isShow: true,
        title: this.$t('新增'),
        type: 'add'
      }
    },
    async editList(row) {
      this.form = deepClone(row)
      this.visible = {
        title: this.$t('编辑'),
        isShow: true,
        type: 'edit'
      }
    },
    delList(row) {
      this.$confirm(this.$t('确定删除?'), this.$t('提示'), {
        type: 'warning'
      }).then(async () => {
        const res = await guestGroupDelete({
          id: row.guestGroupId
        })
        if (res.code === 1) {
          this.$message({
            type: 'success',
            message: this.$t('删除成功')
          });
          this.getTableData()
        }
      });
    },
    /**
     * 编辑客群列表状态
     */
    async updateStatus(row) {
      const params = Object.assign({}, row, {
        status: row.status === 0 ? 1 : 0
      })
      const res = await guestGroupUpdate(params)
      if (res.code === 1) {
        this.$message.success(this.$t('修改成功'));
        this.getTableData();
      }

    },
    visibleClear() {
      this.form = {
        status: 0,
        type: 1
      }
      this.$refs.form.resetFields()
    },
    visibleConfirm() {
      this.$refs.form.validate(async v => {
        if (v) {
          let api
          let message = ''
          if (this.visible.type === 'add') {
            api = addGuestGroup(this.form)
            message = this.$t('新增成功')
          } else {
            api = guestGroupUpdate(this.form)
            message = this.$t('编辑成功')
          }
          const res = await api
          if (res.code === 1) {
            this.$message.success(message)
            this.visibleClear()
            this.visible.isShow = false
            this.getTableData()
          }
        }
      })
    },
    // 绑定经理
    async bindManager(row) {
      this.rowsData = deepClone(row)
      this.bindManagerVisible = true

    },
    // 绑定员工
    async bindPeople(row) {
      this.rowsData = deepClone(row)
      this.bindVisible = true
    }
  },
  components: {
    BindPeople,
    BindManager
  },
}
</script>

<style scoped>

</style>
